import "./style.css";

import { observable, autorun, action } from "@formily/reactive";

// 创建可订阅对象,每次操作该对象属性数据时会自动通知订阅者。通过ES Proxy来创建
const obs: any = observable({});

// const handler = (action.bound as any)(() => {
//   obs.aa = 123;
//   obs.bb = 321;
// });

export const handler = action.bound?.(() => {
  obs.aa = 123;
  obs.bb = 321;
});

// 创建一个订阅者，参数为一个tracker函数。如果函数内部有observable 对象中的某
// 个属性进行读操作(依赖收集)，那当前 reaction 就会与该属性进行一个绑定(依赖追踪)，
// 直到该属性在其他地方发生了写操作，就会触发 tracker 函数重复执行对
// 此写法会让autorun里的函数执行3次：autorun 默认执行一次，加上 obs.aa 赋值执行一次，obs.bb 赋值执行一次
autorun(() => {
  console.log(obs.aa, obs.bb);
});

if (handler !== undefined) {
  handler();
}
